<template>
    <div class="login box-b w h over-h">
        <div class="main">
            <div class="login-title">登录</div>

            <div class="user-info">
                <div class="user">
                    <van-field v-model="username" label-width="30px" label="工号" placeholder="工号">
                        <template #label>
                            <img class="user-label" src="@/assets/main/login/username.png" />
                        </template>
                    </van-field>
                </div>
                <div class="pass">
                    <van-field v-model="password" type="password" label-width="30px" label="密码" placeholder="密码">
                        <template #label>
                            <img class="pass-label" src="@/assets/main/login/password.png" />
                        </template>
                    </van-field>
                </div>
                <div class="forget">忘记密码?</div>
            </div>
            <div class="button-info">
                <div class="user-login-button" @click="loginSubmit">登录</div>
            </div>
            <div class="bottom-info" style="margin-top:100px">
                <span class="bottom-text">
                    没有可用的账号?
                    <span @click="goRegister">注册</span>
                </span>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import PageBase from '@/views/mixins/page-base'
import { login } from '@/apis/login';
import { type RequestCode } from '@/server/base';
import { type LoginUser } from '@/server/index';
import { type Store } from 'vuex';
import { Toast } from 'vant';
export default {
    mixins: [PageBase],
    data() {
        return {
            username: '',
            password: ''
        }
    },
    methods: {
        /**
         * 登录
         */
        loginSubmit() {
            login({
                user: this.username,
                pass: this.password
            }).then((res: RequestCode) => {
                //登录成功 用户信息
                const { pwd, ...user } = res.data as LoginUser;
                (this.$store as Store<any>).commit('user/setUserInfo', user);
                (this.$store as Store<any>).commit('router/setReloadPage', true);
                this.$router.push({ name: 'home' });

            }).catch((error) => {
                Toast(error.message || error.msg || "登录失败，请稍后再试！");
            });
        },
        goRegister() {
            this.$router.push({ name: 'register' })
        }
    },
    created() {
        if (import.meta.env.toString() != 'production') {
            this.username = ''
            this.password = ''
        }
    }
}
</script>

<style lang="css">
.user-info .van-field__control {
    font-size: 16px !important;
}
</style>

<style lang="scss" scoped>
.login {
    box-sizing: border-box;

    .main {
        box-sizing: border-box;
        user-select: none;
        padding: 24px 24px;
        height: 100%;
        width: 100%;

        .login-title {
            margin-top: 40px;
            /** 文本1 */
            font-size: 36px;
            font-weight: 700;
            color: rgba(91, 103, 202, 1);
        }

        .user-info {
            margin-top: 46px;

            .pass {
                margin-top: 30px;
            }

            .user,
            .pass {
                border-bottom: 1px solid rgba(227, 232, 241, 1);
            }

            .user-label {
                width: 20px;
                height: 20px;
            }

            .pass-label {
                width: 20px;
                height: 20px;
            }

            .forget {
                margin-top: 18px;
                font-size: 12px;
                font-weight: 400;
                color: rgba(91, 103, 202, 1);
                text-align: right;
                vertical-align: top;
            }
        }

        .bottom-info {
            // position: absolute;
            // bottom: 42px;
            width: calc(100% - 20px);
            @extend .f-c, .a-i-c;

            .bottom-text {
                font-size: 14px;
                font-weight: 400;
                color: rgba(44, 64, 110, 1);

                /** 文本2 */
                span {
                    font-weight: 700;
                }
            }
        }

        .button-info {
            margin-top: 56px;

            .user-login-button {
                width: 100%;
                text-align: center;
                line-height: 52px;
                height: 52px;
                border-radius: 14px;
                background: rgba(91, 103, 202, 1);
                box-shadow: -3px 7px 13px 0px rgba(241, 247, 255, 1);
                color: #fff;
            }
        }
    }
}
</style>
